<template style=" width:1510px;">
    <div class="mainbody">
        <el-container>
            <el-header height="150px">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div style="position:relative;color: #ff6633;">
                                <div
                                    style="position: absolute;height:75px;width: 100%;line-height:120px;font-size:24px;font-weight: 600;">
                                    购物系统</div>
                                <div
                                    style="position: absolute;height:75px;width: 100%;line-height:10px;top:75px;font-size: 18px;font-weight: 500;">
                                    gouwuxitong</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">&nbsp;</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <div>
                                <div style="height:75px;width: 100%;line-height:150px;font-size:34px;font-weight: 600; ">
                                    注册界面
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main style="width: 1510px;">
                <el-row>
                    <el-col :span="6">&nbsp;</el-col>
                    <el-col :span="12">
                        <el-form class="from"
                            style="background: rgb(235, 230, 230);width:70%;margin:0 auto;height: 450px;margin-top:55px;">
                            <el-form-item>
                                <h2> 注册页面</h2>
                            </el-form-item>
                            <el-form-item style="margin-top:-30px;;">
                                <div style="margin-left: -200px;"><span>*</span>
                                    用户名：</div>
                                <el-input placeholder="用户名" v-model="userName" style="width:50%"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div style="margin-left: -215px;"><span>*</span>
                                    密码：</div>
                                <el-input placeholder="密码" v-model="passWord" style="width:50%"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div style="margin-left: -185px;"><span>*</span>
                                    确认密码：</div>
                                <el-input placeholder="确认密码" v-model="confirmPassWord" style="width:50%"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="checkRegist">注册</el-button>
                                <div style="margin-left:300px;">
                                    <a href="http://localhost:8080/#/ShopLogin" style="text-decoration: none;">登录</a>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="6">&nbsp;</el-col>
                </el-row>
            </el-main>
            <el-footer height="80px" style="width: 1510px;">作者：咕嘟[gudoo]</el-footer>
        </el-container>
    </div>
</template>

<script>
import { userInfo } from "../ajax/get"
import { userRegistration} from "../ajax/post"
export default {
    name: "ShopRegist",
    // 只用于自定义属性,自定义属性要写在return{}的大括号
    data() {
        return {
            userName: "",  // 接收用户名
            passWord: "", // 密码
            confirmPassWord:"",//确认密码
        };
    },
    methods: {
        // 打印userName值
        showUserName() {
            let userName = "1111";
            console.log("userName值:", userName, "===", this.userName);
        },
        //检查是否与上述密码一致
        checkPassWord() {
            if (this.passWord) {
                
            }
        },
        // 检查登录
        checkRegist() {
            if (this.userName == null || this.userName == "") {
                this.$message.error("用户名不能为空!");
                return;
            }
            if (this.passWord == null || this.passWord == "") {
                this.$message.error("密码不能为空!");
                return;
            }
            if (this.confirmPassWord != this.passWord) {
                this.$message.error("与上述密码不一致!");
                return;
            }
            let obj={
                "passWord": this.passWord,
	            "userName": this.userName
            }
            userRegistration(obj).then(res => {
                console.log("用户信息",res);
                if (res.data.code == 5000) {
                    this.$message.error(res.data.msg);
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    // this.goToLogin()
                    this.$router.push('/shopLogin')
                }
            })
        },
        // goToLogin() {
        //     this.$router.push('/shopLogin')
        // }

    }
}
</script>

<style scoped>
@import "../assets/css/shopRegist.css";
</style>
<!-- <template>
  <div class="mainbody">
    <el-container>
        <el-header height="150px" width="1510px">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div style="position:relative;color: #ff6633;">
                            <div style="position: absolute;height:75px;width: 100%;line-height:120px;font-size:24px;font-weight: 600;">购物系统</div>
                            <div style="position: absolute;height:75px;width: 100%;line-height:10px;top:75px;font-size: 18px;font-weight: 500;">gouwuxitong</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light">&nbsp;</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div style="position:relative;">
                            <div style="position: absolute;height:75px;width: 100%;line-height:150px;font-size:34px;font-weight: 600;">登录界面</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="12">
                    <el-form class="from" style="background: rgb(235, 230, 230);width:70%;margin:0 auto;height: 440px;margin-top:10px;">
                        <el-form-item>
                            <h2> 登录页面</h2>
                        </el-form-item>
                        <el-form-item style="margin-top:-30px;;">
                            <div style="margin-left: -165px;"><span>*</span>
                            用&nbsp;户&nbsp;名：</div>
                            <el-input placeholder="用户名" v-model="userName" style="width:50%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="margin-left: -160px;"><span>*</span>
                                密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</div>
                            <el-input  type="password" placeholder="密码" v-model="passWord" style="width:50%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="margin-left: -140px;"><span>*</span>
                                确认密码：</div>
                            <el-input  type="password" placeholder="确认密码" v-model="checkPassWord" style="width:50%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="checkRegist">注册</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="6">&nbsp;</el-col>
            </el-row>
        </el-main>
        <el-footer height="200px">作者：咕嘟[gudoo]</el-footer>
    </el-container>
  </div>
</template>

<script>
import {login,userInfo} from "../ajax/get"
export default {
    name: "ShopRegist",
    // 只用于自定义属性,自定义属性要写在return{}的大括号
    data () {
        return {
            userName: "",  // 接收用户名
            passWord: "", // 密码
        };
    },
    methods: {
        // 打印userName值
        showUserName() {
            let userName = "1111";
            console.log("userName值:",userName, "===",this.userName);
        },
        // 检查登录
        checkRegist() {
            if (this.userName ==  null || this.userName == "") {
                this.$message.error("用户名不能为空!");
                return;
            }
            if (this.passWord ==  null || this.passWord == "") {
                this.$message.error("密码不能为空!");
                return;
            }
            Regist(this.userName,this.passWord).then(res => {
                console.log(res);
                if (res.data.code == 5000) {
                    this.$message.error(res.data.msg);
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        }
       
    }
}
</script>

<style scoped>
    @import "../assets/css/shopRegist.css";
</style> -->